<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
{#    <style>#}
{#        .wqrf_button{#}
{#            background: linear-gradient(to top,#daffff,white);#}
{#            border-radius: 5px;#}
{#            border: 1px solid #353c48;#}
{#            box-shadow: 4px 4px 4px grey;#}
{#        }#}
{#    </style>#}
</head>
<body>
    <nav class="navbar navbar-default" role="navigation" style="position: absolute;top: 0px;left: 80px;width:-webkit-calc(100% - 200px);z-index: 1">
    <div class="container-fluid">
    <div class="navbar-header">
        <span style="font-size: xx-small" class="navbar-brand" >项目名称：{{ project.name }}</span>
        <a class="navbar-brand" href="/project_list/">返回项目列表</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="/apis/{{ project.id }}/">接口库</a></li>
            <li><a href="/cases/{{ project.id }}/">用例库</a></li>
            <li><a href="/project_set/{{ project.id }}/">项目设置</a></li>
        </ul>
    </div>
    </div>
<br><br>
<table class="table table-striped">
<thead>
    <tr>
        <th>id</th> <th style="width: 40%">接口名称</th> <th style="width: 20%">url</th> <th style="width: 350px">操作</th>
    </tr>
</thead>
<tbody>
     {% for i in apis %}
         <tr>
            <td>{{ i.id }}</td><td>{{ i.name }}</td><td>{{ i.api_url }}</td>
         <td>
             <div class="btn-group" style="z-index: 0">
                <button class="btn btn-success" onclick="ts_show('{{ i.id }}','{{ i.name }}')">调试</button>
                <button class="btn btn-default" onclick="open_bz('{{ i.id }}')">备注</button>
                <button class="btn btn-default" onclick="copy_api({{ i.id }})">复制</button>
                <button class="btn btn-default" onclick="error_test('{{ i.id }}','{{ id.api_body }}')">异常值测试</button>
                <button class="btn btn-danger" onclick="document.location.href='/project_api_del/{{ i.id }}/'">删除</button>
             </div>
         </td>
        </tr>
    {% endfor %}
</tbody>
</table>
</nav>
<div style="position: fixed;bottom: 0px;width: 100%;background-color: #f8f8f8;text-align: center;border: 1px solid #e7e7e7">
    <div class="btn-group">
        <button type="button" class="btn btn-default" onclick="document.location.href='/project_api_add/{{ project.id }}/'">新增接口</button>
        <button type="button" class="btn btn-default">全局请求头</button>
        <button type="button" class="btn btn-default">全局域名</button>
        <button type="button" class="btn btn-default">接口文档导入</button>
        <button type="button" class="btn btn-default">抓包导入</button>
        <button type="button" class="btn btn-default">加密算法</button>
        <button type="button" class="btn btn-default">登录状态接口</button>
    </div>


</div>
{# 备注弹层及函数#}
<div id="bz" style="display: none; width: 50%;height: 30%;position: fixed;z-index:999;left: 25%;top: 35%;background-color: #3c4043;box-shadow: 4px 4px 8px grey">
    <input id="which_api" type="text" style="display: none">
    <textarea name="" id="bz_value" style="width: 100%;height: 80%" placeholder="请输入接口备注"></textarea>
    <button onclick="save_bz()" style="width: 49.9%;height: 20%">保存</button> <button onclick="close_bz()"  style="width: 49.3%;height: 20%">取消</button>

</div>
    <script>
        function copy_api(api_id) {
            $.get('/copy_api/',{
                'api_id':api_id
            },function (ret) {
                document.location.reload();
            })
        }
        function open_bz(id) {
            document.getElementById('bz_value').value = ''; // 这是清空上一个打开的接口的内容
            $.get('/get_bz/',{
                'api_id':id
            },function (ret) {
                document.getElementById('bz').style.display='block';
                document.getElementById('which_api').value = id;
                document.getElementById('bz_value').value = ret;
            })
            document.getElementById('which_api').value=id;
        }
        function save_bz() {
            id = document.getElementById('which_api').value;
            bz_value = document.getElementById('bz_value').value;
            $.get('/save_bz/',{
                'api_id':id,
                'bz_value':bz_value
            },function (ret) {
                alert('保存成功')
                document.getElementById('bz').style.display='none';
            })
        }
        function close_bz() {
            document.getElementById('bz').style.display='none';
        }
    </script>
{# 调试弹层及函数 #}
<div id="ts" style="display: none; border-radius: 5px;width:80%;
    position: absolute;z-index:2;left: 10%;top: 10%;background-color: #3c4034;box-shadow: 4px 4px 8px grey;color: white;padding-left: 10px">

    <div class="btn-group" style="float:right;">
        <button onclick="ts_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="ts_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <h3>接口：<small style="color: greenyellow" id="ts_api_id"></small>-
        <input placeholder="请在此输入接口名称" type="text" id="ts_api_name" style="padding-left: 5px;width: 50%;color: #329104">
    </h3>


    <ul class="nav navbar-nav" style="width: 98%">

        <li>
            <select id="ts_method" style="height: 40px;" class="form-control">
                <option value="none"> 请求方式</option>
                <option value="post" > POST</option>
                <option value="get" > GET</option>
                <option value="put" > PUT</option>
                <option value="delete"> DELETE</option>
            </select>
        </li>

        <li style="width: -webkit-calc(100% - 225px)">
            <input  id="ts_url" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='url: 如 /abcd/efgh/' value="">
        </li>

        <li >
            <button onclick="ts_send()" type="button"
                    style="height: 40px;width: 120px;"
                    class="btn btn-default"><span style="font-size: large">Send</span></button>
        </li>
    </ul>
    <br><br><br>
    <ul class="nav navbar-nav" style="width: 98%">
        <li style="width: -webkit-calc(100% - 63px)">
            <input id="ts_host" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                    placeholder='host:如http(s)://xxx.ccc.com' value="">
        </li>
        <li>
            <button type="button" style="height: 40px;width: 60px;" class="btn btn-default">Clear</button>
        </li>
        
    </ul>

    <br><br><br>
    <ul class="nav navbar-nav" style="width: 98%">
        <li style="width: -webkit-calc(100% - 63px)">
            <input id="ts_header" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                    placeholder='head请求头:如｛"Content":"application/json"｝' value="">
        </li>
         <li>
            <button type="button" style="height: 40px;width: 60px;" class="btn btn-default">Clear</button>
        </li>
    </ul>

    <br><br><br>
    <ul id="myTab" class="nav nav-tabs" >
        <li class="active"><a id="click_none" href="#none" data-toggle="tab" >none</a></li>
        <li ><a href="#form-data" data-toggle="tab" >form-data</a></li>
        <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li>
                <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
                <li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li>
                <li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li>
                <li><a href="#Xml" tabindex="-1" data-toggle="tab">Xml</a></li>

            </ul>
        </li>
        <li ><a href="#response" data-toggle="tab" >返回体</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="none" style="text-align: center;color: grey">
            <h3>这个请求将不会携带任何请求体</h3>
            <h5>This request will not carry any request-body</h5>
        </div>
        <div class="tab-pane fade" id="form-data">

            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="mytable" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                      <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                      </tr>
                    </thead>
                    <tbody id="mytbody">
                      <tr>
                          <td></td>
                          <td></td>
                      </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
            {#            接口详情内form-data多了一列表格#}
{#            <script type="text/javascript">#}
{#                $('#mytable').SetEditable({#}
{#                    $addButton: $('#add'),#}
{#                });#}
{#            </script>#}
        </div>
        <div class="tab-pane fade" id="x-www-form-urlencoded">
            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="mytable2" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                      <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                      </tr>
                    </thead>
                    <tbody id="mytbody2">
                      <tr>
                          <td></td>
                          <td></td>
                      </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="add2"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
{#            接口详情内form-data多了一列表格#}
{#            <script type="text/javascript">#}
{#                $('#mytable2').SetEditable({#}
{#                    $addButton: $('#add2'),#}
{#                });#}
{#            </script>#}
        </div>
        <div class="tab-pane fade" id="Text">
            <textarea name="" id="raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="JavaScript">
            <textarea name="" id="raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="Json">
            <textarea name="" id="raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="Html">
            <textarea name="" id="raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="Xml">
            <textarea name="" id="raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="response">
            <textarea name="" id="ts_response_body" disabled="disabled" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
    </div>
    <br>
</div>

<script>
    function clear_ts_api() {
        document.getElementById('ts_api_id').innerText = '';
        document.getElementById('ts_api_name').value = '';
        document.getElementById('ts_method').value = 'none';
        document.getElementById('ts_url').value = '';
        document.getElementById('ts_host').value = '';
        document.getElementById('ts_header').value = '{}';
        // 开始初始化请求体编码格式部分
        document.getElementById('click_none').click(); // 点击none字标签
        document.getElementById('mytbody').innerHTML = '<tr><td></td><td></td></tr>';
        document.getElementById('mytbody2').innerHTML = '<tr><td></td><td></td></tr>';
        document.getElementById('raw_Text').value = '';
        document.getElementById('raw_JavaScript').value = '';
        document.getElementById('raw_Json').value = '';
        document.getElementById('raw_Html').value = '';
        document.getElementById('raw_Xml').value = '';
        // 返回体清空
        document.getElementById('ts_response_body').value = '';
        $('#mytable').SetEditable({
                    $addButton: $('#add'),
        });
        $('#mytable2').SetEditable({
                    $addButton: $('#add2'),
        });
    }
    function ts_show(id,name) {
        clear_ts_api();
        document.getElementById('ts').style.display = 'block';
        document.getElementById('ts_api_id').innerText = id;
        {#document.getElementById('ts_api_name').value = name;#}
        $.get('/get_api_data/',{
            'api_id':id,
        },function (ret) {
            console.log(ret)
            document.getElementById('ts_api_name').value = ret.name;
            document.getElementById('ts_method').value = ret.api_method;
            document.getElementById('ts_url').value = ret.api_url;
            document.getElementById('ts_host').value = ret.api_host;
            document.getElementById('ts_header').value = ret.api_header;
            // 请求体编码格式
            var body_method = '#' +ret.body_method;
            $("li a[href="+body_method+"]").click();
            // 请求体显示
            if (ret.body_method == 'Text'){
                document.getElementById('raw_Text').value = ret.api_body;
            }
            if (ret.body_method == 'JavaScript'){
                document.getElementById('raw_JavaScript').value = ret.api_body;
            }
            if (ret.body_method == 'Json'){
                document.getElementById('raw_Json').value = ret.api_body;
            }
            if (ret.body_method == 'Html'){
                document.getElementById('raw_Html').value = ret.api_body;
            }
            if (ret.body_method == 'Xml'){
                document.getElementById('raw_Xml').value = ret.api_body;
            }
            if (ret.body_method == 'form-data'){
                var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分
                body = eval(ret.api_body); // 把这个像列表的字符串请求体变成真正的列表
                for (var i=0;i<body.length;i++){
                    key = body[i][0]; // 每个键值对的key
                    value = body[i][1]; // 每个键值对的value
                    var child_str = tbody.children; // 获取到这个表格下面所有的tr组成的大列表
                    // 每个tr 下的children得到的是 td 列表，只有两个
                    child_str[i].children[0].innerText = key; // 第一个td 放key
                    child_str[i].children[1].innerText = value; // 第二个td 放value
                    // 判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if (i<body.length-1){
                        document.getElementById('add').click()
                    }

                }
            }
            if (ret.body_method == 'x-www-form-urlencoded'){
                var tbody = document.getElementById('mytbody2'); // 定位表格中的tbody部分
                body = eval(ret.api_body); // 把这个像列表的字符串请求体变成真正的列表
                for (var i=0;i<body.length;i++){
                    key = body[i][0]; // 每个键值对的key
                    value = body[i][1]; // 每个键值对的value
                    var child_str = tbody.children; // 获取到这个表格下面所有的tr组成的大列表
                    // 每个tr 下的children得到的是 td 列表，只有两个
                    child_str[i].children[0].innerText = key; // 第一个td 放key
                    child_str[i].children[1].innerText = value; // 第二个td 放value
                    // 判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if (i<body.length-1){
                        document.getElementById('add2').click()
                    }

                }
            }


        })

    }
    function ts_close() {
        {#document.getElementById('ts').style.display='none';#}
        document.location.reload();
    }
    function ts_save() {
        // 获取所有接口设置数据
        var api_name = document.getElementById('ts_api_name').value;
       var ts_method = document.getElementById('ts_method').value;
       var ts_url = document.getElementById('ts_url').value;
       var ts_host = document.getElementById('ts_host').value;
       var ts_header = document.getElementById('ts_header').value;

       // 判断顶部的数据是否填充完
        if (api_name == ''){alert('请输入接口名字！');return}
        if (ts_method == 'none'){alert('请选择请求方式！');return}
        if (ts_url == ''){alert('请输入URL！');return}
        if (ts_host == ''){alert('请输入HOST！');return}

        // 判断关键数据是否符合规则
        if (ts_host.slice(0,7) != 'http://' && ts_host.slice(0,8) != 'https://'){
            alert('host必须以http:// 或 https:// 开头！');return;
        }
        if (ts_header != ''){
            try {
                JSON.parse(ts_header)
            }catch (e) {
                alert('header请求头不符合json规范！');
            }
        }

       var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
       if (ts_body_method == 'none'){
           var ts_api_body = ''
       }
       if (ts_body_method == 'form-data'){
          var ts_api_body = []; // 新建这个空列表用来存放后续的数据
          var tbody_ = $("table#mytable tbody")[0]; // 获取该表格的内容部分
          var trlist = tbody_.children; // 获取下面所有的tr，每个tr就是一个键值对实际上
          for (var i=0;i<trlist.length;i++){

              var tdarr = trlist[i].children; // 获取tr下面的两个td
              var key = tdarr[0].innerText;  // 获取key
              var value = tdarr[1].innerText; // 获取value
              ts_api_body.push([key,value]); // 作为一个数组，存放到这个大数据里
          }
          ts_api_body = JSON.stringify(ts_api_body);

       }
        if (ts_body_method == 'x-www-form-urlencoded'){
           var ts_api_body = []; // 新建这个空列表用来存放后续的数据
           var tbody_ = $("table#mytable2 tbody")[0]; // 获取该表格的内容部分
           var trlist = tbody_.children; // 获取下面所有的tr，每个tr就是一个键值对实际上
           for (var i=0;i<trlist.length;i++){
               var tdarr = trlist[i].children; // 获取tr下面的两个td
               var key = tdarr[0].innerText;  // 获取key
               var value = tdarr[1].innerText; // 获取value
               ts_api_body.push([key,value]); // 作为一个数组，存放到这个大数据里
          }
           ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'Text'){
           var ts_api_body = document.getElementById('raw_Text').value;

        }
        if (ts_body_method == 'JavaScript'){
           var ts_api_body = document.getElementById('raw_JavaScript').value;

        }
        if (ts_body_method == 'Json'){
           var ts_api_body = document.getElementById('raw_Json').value;

        }
        if (ts_body_method == 'Html'){
           var ts_api_body = document.getElementById('raw_Html').value;

        }
        if (ts_body_method == 'Xml'){
           var ts_api_body = document.getElementById('raw_Xml').value;

        }
        var api_id = document.getElementById('ts_api_id').innerText; // 获取到了接口id
        $.get('/Api_save/',{
            'api_id':api_id,
            'api_name':api_name,
            'ts_method':ts_method,
            'ts_url':ts_url,
            'ts_host':ts_host,
            'ts_header':ts_header,
            'ts_body_method':ts_body_method,
            'ts_api_body':ts_api_body
        },function (ret) {
            document.location.reload();
        })
    }
    function ts_send() {
        // 获取接口的所有数据
        var api_name = document.getElementById('ts_api_name').value;
        var ts_method = document.getElementById('ts_method').value;
        var ts_url = document.getElementById('ts_url').value;
        var ts_host = document.getElementById('ts_host').value;
        var ts_header = document.getElementById('ts_header').value;

        // 判断顶部的数据是否填充完
        if (ts_method == 'none'){alert('请选择请求方式！');return}
        if (ts_url == ''){alert('请输入URL！');return}
        if (ts_host == ''){alert('请输入HOST！');return}

        // 判断关键数据是否符合规则
        if (ts_host.slice(0,7) != 'http://' && ts_host.slice(0,8) != 'https://'){
            alert('host必须以http:// 或 https:// 开头！');return;
        }
        if (ts_header != ''){
            try {
                JSON.parse(ts_header)
            }catch (e) {
                alert('header请求头不符合json规范！');
            }
        }


        var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
        if (ts_body_method == 'none'){
           var ts_api_body = ''
       }
        if (ts_body_method == 'form-data'){
          var ts_api_body = []; // 新建这个空列表用来存放后续的数据
          var tbody_ = $("table#mytable tbody")[0]; // 获取该表格的内容部分
          var trlist = tbody_.children; // 获取下面所有的tr，每个tr就是一个键值对实际上
          for (var i=0;i<trlist.length;i++){

              var tdarr = trlist[i].children; // 获取tr下面的两个td
              var key = tdarr[0].innerText;  // 获取key
              var value = tdarr[1].innerText; // 获取value
              ts_api_body.push([key,value]); // 作为一个数组，存放到这个大数据里
          }
          ts_api_body = JSON.stringify(ts_api_body);

       }
        if (ts_body_method == 'x-www-form-urlencoded'){
           var ts_api_body = []; // 新建这个空列表用来存放后续的数据
           var tbody_ = $("table#mytable2 tbody")[0]; // 获取该表格的内容部分
           var trlist = tbody_.children; // 获取下面所有的tr，每个tr就是一个键值对实际上
           for (var i=0;i<trlist.length;i++){
               var tdarr = trlist[i].children; // 获取tr下面的两个td
               var key = tdarr[0].innerText;  // 获取key
               var value = tdarr[1].innerText; // 获取value
               ts_api_body.push([key,value]); // 作为一个数组，存放到这个大数据里
          }
           ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'Text'){
           var ts_api_body = document.getElementById('raw_Text').value;

        }
        if (ts_body_method == 'JavaScript'){
           var ts_api_body = document.getElementById('raw_JavaScript').value;

        }
        if (ts_body_method == 'Json'){
           var ts_api_body = document.getElementById('raw_Json').value;

        }
        if (ts_body_method == 'Html'){
           var ts_api_body = document.getElementById('raw_Html').value;

        }
        if (ts_body_method == 'Xml'){
           var ts_api_body = document.getElementById('raw_Xml').value;

        }
        var api_id = document.getElementById('ts_api_id').innerText; // 获取到了接口id

        // 发送请求给后台
        $.get('/Api_send/',{
            'api_id':api_id,
            'api_name':api_name,
            'ts_method':ts_method,
            'ts_url':ts_url,
            'ts_host':ts_host,
            'ts_header':ts_header,
            'ts_body_method':ts_body_method,
            'ts_api_body':ts_api_body
        },function (ret) {
            $('li a[href=#response]').click() // 点击一下返回体按钮
            document.getElementById('ts_response_body').value = ret; // 把返回值显示到返回值文本框
        })
        
    }
</script>
{#异常值测试#}
<div id="error_div" style="display: none;border-radius: 5px;width: 80%;
position: absolute;z-index:999;left: 10%;top: 10%;background-color: #3c4043;box-shadow: 4px 4px 8px grey;color: white;padding-left: 10px">
    <div class="btn-group" style="float: right">
        <button onclick="" type="button" class="btn btn-success">开始测试</button>
        <button onclick="error_close()" type="button" class="btn btn-default">关闭</button>
    </div>
    <h4>接口：<small style="color: #0dff00" id="error_api_name"></small> 的异常值测试结果如下:</h4>

    <strong>待替换数据：(用英文逗号隔开)</strong>
    <input id="ready_error_data" type="text" style="border-radius: 5px;width: 99%"
           value="'a',123,'',' ','./?*&^','中文'"
    > <br><br>

    <span>替换：username -> 123</span>
    <textarea style="width: 99%;height: 50px;border-radius: 5px;color:black"></textarea>

    <span>替换：username -> "aaa"</span>
    <textarea style="width: 99%;height: 50px;border-radius: 5px;color:black"></textarea>

    <span>替换：username -> "哈哈哈"</span>
    <textarea style="width: 99%;height: 50px;border-radius: 5px;color:black"></textarea>

</div>
<script>
    function error_test(api_id,api_body) {
        error_clear();
        document.getElementById('error_div').style.display='block';
        document.getElementById('error_api_name').innerText = api_id;
    }
    function error_close() {
        document.getElementById('error_div').style.display='none';
    }
    function error_clear() {
        document.getElementById('error_div').innerHTML = '<div class="btn-group" style="float: right">\n' +
        '<button onclick="" type="button" class="btn btn-success">开始测试</button>\n' +
        '<button onclick="error_close()" type="button" class="btn btn-default">关闭</button>\n' +
        '</div>\n' +
        '\n' +
        '<h4>接口：<small style="color: #0dff00" id="error_api_name"></small> 的异常值测试结果如下:</h4>\n' +
        '\n' +
        '<strong>待替换数据：(用英文逗号隔开)</strong>\n' +
        '<input id="ready_error_data" type="text" style="border-radius: 5px;width: 99%"\n' +
        'value="\'a\',123,\'\',\' \',\'./?*&^\',\'中文\'"\n' +
        '> <br><br>'
    }
</script>
</body>
</html>